<template>
	<div class="zuzhiguanli flex">
    <left2></left2>

    <div style="width: calc(100vw - 220px); height: 100vh; overflow: auto;" class="animate__animated animate__fadeIn">
      <div class="flexc" style="padding: 30px 30px 0;">
          <el-button type="primary" icon="el-icon-plus" @click="logshow">添加字典</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="qinghuancun">清楚缓存</el-button>
      </div>

      <div class="flexc" style="padding:30px;">
        <div>
          <el-select v-model="search.param.sysName" style="width: 200px; margin-right: 20px;"  clearable filterable placeholder="请输入系统名称">
              <el-option  v-for="item in xialaall.xitonglist" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div><el-input v-model="search.param.dictName" style="width: 200px; margin-right: 20px;" placeholder="请输入字典名称"></el-input></div>
        <div>
          <el-input v-model="search.param.dictType" style="width: 200px; margin-right: 20px;" placeholder="请输入字典类型"></el-input>
        </div>
        <div>
          <el-select v-model="search.param.status" style="width: 200px; margin-right: 20px;"  clearable filterable placeholder="请选择类型">
              <el-option  label="正常" :value="0"></el-option>
              <el-option  label="停用" :value="1"></el-option>
          </el-select>
        </div>
        <el-button type="primary" @click="searchgo()">检索</el-button>
      </div>
      <div style="padding:0 30px;">
          <el-table :data="list" style="width: 100%;">
            <el-table-column align="center" prop="dictId" label="ID"></el-table-column>
            <el-table-column align="center" prop="sysNameStr" label="系统名称"></el-table-column>
            <el-table-column align="center" prop="dictName" label="字典名称"></el-table-column>
            <el-table-column align="center" prop="dictType" label="字典类型"></el-table-column>
            <el-table-column align="center" prop="statusStr" label="状态"></el-table-column>
            <el-table-column align="center" prop="remark" label="备注"></el-table-column>
            <el-table-column align="center" prop="createdDate" label="日期"></el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <div class="flexcc">
                  <div style="color: #0093F6; cursor: pointer; margin: 0 10px;" @click="bianji(scope.row)">修改</div>
                  <div style="color: #f00; cursor: pointer; margin: 0 10px;" @click="shanchu(scope.row)">删除</div>
                  <div style="color: #0093F6; cursor: pointer; margin: 0 10px;" @click="guanli(scope.row)">管理数据</div>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination style="padding: 20px; text-align: right;"
            @current-change="fanye"
            background
            :page-size="search.size"
            layout="total,prev, pager, next"
            :total="total">
          </el-pagination>
      </div>
    </div>

    <el-dialog :title="logtitle" center :visible.sync="log" width="600px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>系统名称</div>
          <div>
            <el-select v-model="all.sysName" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择状态">
                <el-option  v-for="item in xialaall.xitonglist" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>字典名称</div>
          <div><el-input v-model="all.dictName" style="width: 350px; margin-left: 30px;" placeholder="请输入字典名称"></el-input></div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>字典类型</div>
          <div><el-input v-model="all.dictType" style="width: 350px; margin-left: 30px;" placeholder="请输入字典类型"></el-input></div>
        </div>

        <!-- <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;">字典类型</div>
          <div>
            <el-select v-model="all.dictType" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择字典类型">
                <el-option  v-for="item in xialaall.fenleilist" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div> -->
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>状态</div>
          <div>
            <el-select v-model="all.status" style="width: 350px; margin-left: 30px;"  clearable filterable placeholder="请选择状态">
                <el-option  v-for="item in xialaall.zhuangtailist" :key="item.value" :label="item.label" :value="item.value * 1"></el-option>
            </el-select>
          </div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>备注</div>
          <div><el-input v-model="all.remark" style="width: 350px; margin-left: 30px;" placeholder="请输入备注"></el-input></div>
        </div>

    	  <span slot="footer" class="dialog-footer">
          <el-button type="danger" round @click="log = false">取消</el-button>
          <el-button type="danger" round @click="add">确定</el-button>
    	  </span>
    </el-dialog>

	</div>
</template>

<script>

  import { addtype,updatetype,gettype,refreshtype,getxiala,removetype } from '@/api/zidian'
  import left2 from '@/view/left2.vue'
	export default {
		name: 'zuzhiguanli',
    components:{
      left2
    },
		data() {
			return {
        all:{
          "sysName":"",
          "dictName":"",
          "dictType":"",
          "status":"",
          remark:""
        },
        list:[],
        search:{

            "page":1,
            "size":10,
            "param":{
              "sysName":"",
              "dictName":"",
              "dictType":"",
              "status":"",
              "beginTime":"",
              "endTime":"",
            }

        },
        total:0,

        log:false,
        logtitle:"",

        xialaall:{
          fenleilist:"",
          zhuangtailist:"",
          xitonglist:""
        },

			}
		},
		created() {
      this.getlist()
      this.getxialalist()
		},
		mounted() {

		},
		methods: {
      qinghuancun:function(){
        refreshtype().then((response)=>{
          this.$message.success('清除缓存成功');
          this.getlist()
        })
      },
      guanli:function(item){
        this.$router.push({
          path:'/zidian/zidianshuju',
          query:{
            allDictType:item.allDictType,
          }
        })
      },

      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removetype(item.dictId).then((response)=>{
            this.$message.success('删除成功');
            this.getlist()
          })
        })
      },

      bianji:function(item){
        this.logtitle = '修改字典'

        this.all = {
          "sysName":item.sysName,
          "dictName":item.dictName,
          "dictType":item.dictType,
          "status":item.status,
          remark:item.remark,
          "dictId": item.dictId,
        }
        this.log = true

      },
      chushihua:function(){
        this.xialaall.xitonglist.forEach(item=>{
          if(item.mr){this.all.sysName = parseInt(item.value) }
        })
      },
      logshow:function(){
        this.logtitle = '新增字典'
        this.all = {
          "sysName":"",
          "dictName":"",
          "dictType":"",
          "status":0,
          remark:"",
          "dictId": "",
        }
        this.chushihua()
        this.log = true
      },

      add:function(){
        if(this.all.dictId){
          updatetype(this.all).then((response)=>{
            this.$message.success('修改成功');
            this.log = false
            this.getlist()
          })
        }else{
          addtype(this.all).then((response)=>{
            this.$message.success('新增成功');
            this.log = false
            this.getlist()
          })
        }
      },

      searchgo:function(){
        this.search.page = 1
        this.getlist()
      },

      getlist:function(){
        gettype(this.search).then((response)=>{
          this.list = response.data.result
          this.total = response.data.count
        })
      },

      fanye:function(val){
        this.search.page = val
        this.getlist()
      },


      //获取下啦数据用
      getxialalist:function(){
        getxiala('valueType').then((response)=>{
          this.xialaall.fenleilist = response.data
        })
        getxiala('sysName').then((response)=>{
          this.xialaall.xitonglist = response.data
        })
        getxiala('status').then((response)=>{
          this.xialaall.zhuangtailist = response.data
        })
      }
		}
	}
</script>


<style scoped >

</style>
